<script setup lang="ts">
import { useRequest } from 'ahooks-vue'
import { ref } from 'vue'
import { getStudent, getStudentEducationInfo, getStudentFamilyInfo, getStudentScore } from '@/api/student'
import useUserStore from '@/store/modules/user'
import type { Student, StudentEducationInfo, StudentFamilyInfo, StudentScoreInfo } from '@/types/user'
import Registrant from '@/views/student/scholarship/lizhi/preliminary/school.vue'

const userStore = useUserStore()

const student = ref<Student & StudentScoreInfo & { familyMembers?: StudentFamilyInfo[]; educationalExperience?: StudentEducationInfo[] }>()
const { run: doQuery } = useRequest(
  query,
  {
    manual: true,
  },
)

async function query() {
  const [{ data: studentInfo }, { data: scoreInfo }, { rows: familyMembers }, { rows: educationalExperience }] = await Promise.all([
    getStudent(userStore.name),
    getStudentScore(userStore.name),
    getStudentFamilyInfo(userStore.name),
    getStudentEducationInfo(userStore.name),
  ])
  return {
    ...studentInfo,
    ...scoreInfo,
    familyMembers,
    educationalExperience,
  } as Student & StudentScoreInfo & { familyMembers?: StudentFamilyInfo[]; educationalExperience?: StudentEducationInfo[] }
}

doQuery().then(info => student.value = info!)

const school = ref<InstanceType<typeof Registrant>>()
async function handleExport() {
  school.value?.onExport()
}
</script>

<template>
  <div class="w-full p-4">
    <ElButton @click="handleExport">
      导出
    </ElButton>
    <Registrant ref="school" :student="student" />
  </div>
</template>
